<template>
 <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code" label="编码">
              <a-input placeholder="请输入编码" v-model="model.code"/>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name" label="姓名">
              <a-input placeholder="请输入姓名" v-model="model.name"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sex" label="性别">
              <a-input placeholder="请输入性别" v-model="model.sex"/>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address" label="地址">
              <a-input placeholder="请输入地址" v-model="model.address"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="addressParam" label="地址（传参）">
              <a-input placeholder="请输入地址（传参）" v-model="model.addressParam"/>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sysOrgCode" label="所属部门">
              <a-input placeholder="请输入所属部门" v-model="model.sysOrgCode"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>

      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="客户明细" :key="refKeys[0]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[0]"
            :loading="guiTestOrderCustomTable.loading"
            :columns="guiTestOrderCustomTable.columns"
            :dataSource="guiTestOrderCustomTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"/>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
</template>

<script>

    import { FormTypes } from '@/utils/JEditableTableUtil'
    import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'

    export default {
      name: 'GuiTestOrderMainForm',
      mixins: [JEditableTableModelMixin],
      data() {
        return {
          // 新增时子表默认添加几行空数据
          addDefaultRowNum: 1,
          model: {
          //设置默认值
           },
          validatorRules: {
          },
          refKeys: ['guiTestOrderCustom', ],
          activeKey: 'guiTestOrderCustom',
          // 客户明细
          guiTestOrderCustomTable: {
            loading: false,
            dataSource: [],
            columns: [
              {
                title: '编码',
                key: 'code',
                type: FormTypes.input,
                defaultValue: '',
                placeholder: '请输入${title}',
              },
              {
                title: '名称',
                key: 'name',
                type: FormTypes.input,
                defaultValue: '',
                placeholder: '请输入${title}',
              },
              {
                title: '日期',
                key: 'date',
                type: FormTypes.input,
                defaultValue: '',
                placeholder: '请输入${title}',
              },
              {
                title: '主表ID',
                key: 'mainId',
                type: FormTypes.input,
                defaultValue: '',
                placeholder: '请输入${title}',
              },
              {
                title: '所属部门',
                key: 'sysOrgCode',
                type: FormTypes.input,
                defaultValue: '',
                placeholder: '请输入${title}',
              },
            ]
          },
          url: {
            add: "/gui/guiTestOrderMain/add",
            edit: "/gui/guiTestOrderMain/edit",
            guiTestOrderCustom: {
              list: '/gui/guiTestOrderMain/queryGuiTestOrderCustomByMainId'
            },
          }
        }
      },
      methods: {
        /** 调用完edit()方法之后会自动调用此方法 */
        editAfter() {
          // 加载子表数据
          if (this.model.id) {
            let params = { id: this.model.id }
            this.requestSubTableData(this.url.guiTestOrderCustom.list, params, this.guiTestOrderCustomTable)
          }
        },

        /** 整理成formData */
        classifyIntoFormData(allValues) {
          let main = Object.assign(this.model, allValues.formValue)
          return {
            ...main, // 展开
            guiTestOrderCustomList: allValues.tablesValue[0].values,
          }
        }
      }
    }
</script>

<style scoped>
</style>